<template>
  <div class="content">
    <div class="content-top">
			订单管理_查找换电产品信息
		</div>
    <div class="top_card">
          <el-form ref="form" inline align='left' :model="form" class="demo-form-inline">
            <el-form-item label="产品编号：">
              <el-input v-model="form.code"></el-input>
            </el-form-item>
            <el-form-item label="产品名称：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="区间开始时间：">
              <el-time-picker
                v-model="form.time1"
                placeholder="请选择区间开始时间"
                style="width:100% !important">
              </el-time-picker>
            </el-form-item>
            <el-form-item label="区间结束时间：">
              <el-time-picker
                v-model="form.time2"
                placeholder="请选择区间结束时间"
                style="width:100% !important">
                
              </el-time-picker>
            </el-form-item>
            <el-button @click="onSearch" icon="el-icon-search" type="primary">搜索</el-button>
          </el-form>
      <div class="add_goods">
         <el-button @click="onAdd" icon="el-icon-plus" type="primary">添加换电产品</el-button>
         <el-button @click="batchDelete(0,2)" icon="el-icon-delete">批量删除</el-button>
      </div>
      <div>
        <el-table
              :data="dataList"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
              >
              <el-table-column
              type="selection"
              width="55"
              align="center"
              >
            </el-table-column>

              <el-table-column
                fixed
                prop="name"
                label="产品名称"
                align="center"
                width="200"
                >
              </el-table-column>
              <el-table-column
                prop="productCode"
                label="产品编号"
                width="300"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="price"
                align="center"
                label="单价"
                >
              </el-table-column>
              <el-table-column
                prop="serviceCharge"
                label="服务费"
                >
              </el-table-column>
              <el-table-column
                prop="startTime"
                label="区间开始时间"
                width="150"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="endTime"
                label="区间结束时间"
                width="150"
                align="center"
                >
              </el-table-column>
              <el-table-column
                prop="createDate"
                label="创建时间"
                align="center"
                width="200"
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="150"
                align="center"
                >
                <template slot-scope="scope">
                  <el-button @click="orderEdit(scope.row.id)" type="text" size="small"><i class="el-icon-edit"></i>编辑</el-button>
                  <el-button @click="batchDelete(scope.row,1)" type="text"  size="small"><i class="el-icon-delete"></i>删除</el-button>
                </template>
              </el-table-column>
            </el-table>
      </div>
      <div class="content-page">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page"
					 :page-size=limit layout="prev, pager, next, jumper" :total=total>
					</el-pagination>
				</div>
    </div>
    <ProductAdd v-if="is_add" @isAdd="addOrder"></ProductAdd>
    <ProductEdit v-if="is_edit" @isEdit="editOrder" :editId="editId"></ProductEdit>
  </div>
</template>

<script>
import ProductAdd from '@/components/product/ProductAdd.vue'
import ProductEdit from '@/components/product/ProductEdit.vue'
import Global from '@/components/Global.vue'
export default {
  name:'ProductSearch',
  components:{
    ProductAdd: ProductAdd,
    ProductEdit: ProductEdit
  },
  data() {
    return {
       form: {
          name: '',
          code: '',
          time1: '',
          time2: ''
        },
        page:1,
        limit:10,
        is_add:false,
        dataList:[],
        multipleSelection: [],
        is_add:false,
        is_edit:false,
        editId:'',
        total:1
    }
  },
  methods: {
    onAdd(){
       this.is_add = true
    },
    orderEdit(id){
      this.editId = id
      this.is_edit = true
    },
    addOrder(val){
      this.is_add = false
      if(val){
        this.getExchangeList()
      }
    },
    editOrder(val){
       this.is_edit = false
       if(val){
         this.getExchangeList()
       }
    },
    handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
		},
		handleCurrentChange(val) {
				this.page = val;
				this.getExchangeList();
		},
    /* 删除 */
    batchDelete(row,type){
      console.log(type)
      var self = this;
      var temp = ''
      if(type == 1){
          temp = '["' + row.id + '"]'
      }else {
        if(self.multipleSelection == ''){
            self.$message('您未选择任何产品')
            return;
        }
        temp = []
        for(var i=0;i<self.multipleSelection.length;i++){
         
         temp.push(self.multipleSelection[i].id)
        }
        temp = JSON.stringify(temp)
      }
				this.$confirm('此操作将删除该产品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					$.ajax({
						url: Global.serverIp + 'order/product/delete',
						data: temp,
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {
							request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('token'));
						},
						contentType: 'application/json;charset=utf-8',
						dataType: 'json',
						type: 'delete',
						success: function(res) {
							if (res.code == Global.success_code) {
								self.$popup.open("删除成功");
								self.getExchangeList();
							} else {
								self.$popup.open(res.msg);
							}
						},
						error: function(res) {
							if (res.responseJSON.code == '040005') {
								self.$popup.open("登录过期");
							} else {
								self.$popup.open("请求失败");
							}
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
    },
    /* 获取列表 */
    getExchangeList(){
        var self = this;
        this.$axios.post(this.$global.serverIp + 'order/product/findPage', {
		  "limit": self.limit + "",
          "page": self.page + "",
          "productCode": self.form.code,
          "name": self.form.name,
          "startTime": self.getHoursMS(self.form.time1),
          "endTime": self.getHoursMS(self.form.time2),
		})
		.then(function (res) {
			if(res != ''){
				for(let item of res.data.list){
                    item.startTime = self.getHoursM(item.startTime)
                    item.endTime = self.getHoursM(item.endTime)
                }
                self.dataList = res.data.list
                self.total = res.data.totalCount
			}
						
		})
  },
  onSearch(){
     this.page = 1
     this.getExchangeList()
  },
  /*  */
  getHoursMS(time){
    if(time == '' || time == null){
       return "";
    }
         var hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
         var minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
         var seconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds()
         return hours + ':' + minutes + ':' + seconds
   },
  /*  */
  getHoursM(value){
    if(value == '' || value == null){
       return "";
    }
    var timearr = value.replace(" ",":").split(" ");
    var timearr2 = timearr[2].split(":")
    var timestr = timearr2[0] + ":" + timearr2[1]
    return timestr
  },

  /*  */
  handleSelectionChange(val){
    this.multipleSelection = val;
  },
  },
  mounted(){
    this.getExchangeList()
  },
}
</script>

<style scoped>
.app-container{
  padding: 20px;
}
.line{
  text-align: center;
}
.add_goods{
  margin: 20px 0;
}
.top_card{
  margin: 20px;
}
</style>

